<template>
  <div>
    <h1>插槽</h1>
    <h2>默认插槽</h2>
    <div>
      <Child1>提交</Child1>
      <Child1></Child1>
    </div>
    <h2>具名插槽</h2>
    <Child2>
      <template #header><div>header</div></template>
      <template #main><div>main</div></template>
      <div>default</div>
      <template #footer><div>footer</div></template>
    </Child2>
    <h2>作用域插槽</h2>
    <Child3>
      <!-- <template v-slot:default="slotProps">
        <p>用户姓名：{{ slotProps.user.name }}</p>
        <p>用户年龄：{{ slotProps.user.age }}</p>
      </template> -->
      <!-- 或者 -->
      <!--       <template #default="slotProps">
        <p>用户姓名：{{ slotProps.user.name }}</p>
        <p>用户年龄：{{ slotProps.user.age }}</p>
      </template> -->
      <!-- 或者 -->
      <!--   <template v-slot="slotProps">
        <p>用户姓名：{{ slotProps.user.name }}</p>
        <p>用户年龄：{{ slotProps.user.age }}</p>
      </template>
      <template #person="slotProps">
        <p>用户姓名：{{ slotProps.user.name }}</p>
        <p>用户年龄：{{ slotProps.user.age }}</p>
      </template> -->
      <!-- 解构 -->
      <template v-slot="{ user: { name, age } }">
        <p>用户姓名：{{ name }}</p>
        <p>用户年龄：{{ age }}</p>
      </template>
      <template #person="{ user: { name, age } }">
        <p>用户姓名：{{ name }}</p>
        <p>用户年龄：{{ age }}</p>
      </template>
    </Child3>
    <!-- 动态插槽 -->
    <h2>动态插槽</h2>
    <Child3>
      <template v-slot:[dynamicSlotName]="{ user: { name, age } }">
        <p>用户姓名：{{ name }}</p>
        <p>用户年龄：{{ age }}</p>
      </template>
    </Child3>
  </div>
</template>

<script>
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'
import Child3 from './components/Child3.vue'
export default {
  name: 'jpage-day22',
  components: { Child1, Child2, Child3 },
  data() {
    return {
      dynamicSlotName: 'person' // 动态插槽名
    }
  }
}
</script>

<style lang="scss" scoped></style>
